<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统参数设置</title>
    <link href="../../vendors/iview/css/iview.css" rel="stylesheet"/>
    <link href="../../styles/common.css" rel="stylesheet"/>
    <link href="../../styles/systemSet.css" rel="stylesheet"/>
    <link href="../../styles/company.css" rel="stylesheet"/>

</head>
<body style="overflow: hidden;">

<!--公司客户内容自适应-->
<div id="app" v-cloak style="height: 100%;padding-bottom: 80px;">

    <!--添加职位-->
    <button-pannel></button-pannel>


    <table-pannel></table-pannel>


</div>


<!--组件 添加职位按钮弹框-->
<script type="text/x-template" id="button-pannel-template" v-cloak>
    <div class="Add-position">
        <button type="primary" @click="addPosition = true">添加职位</button>
        <Modal
                title="添加职位"
                v-model="addPosition"
                :mask-closable="false"
                width="340"
                ok-text="保存"
                loading
                @on-ok="handleAddUser"
                @on-cancel="handleCancel"
                class-name="vertical-center-modal addPositionWrap vertical-center-modal-one">
            <spin v-if="saveLoading" size="large" class="load-spin" fix>
                <icon type="load-c" size=18 class="save-staff-loading"></icon>
                <div>保存中...</div>
            </spin>
            <div class="Add-position_box">
                <ul class="position-ul">
                    <li class="position-li">
                        <span class="zymrjs">职位名称</span>
                        <input type="text" v-model="jobInfo.jobPost">
                    </li>
                    <li class="position-li">
                        <span class="zymrjs">职业默认角色</span>
                        <div class="zymrjs_input">
                            <i-select v-model="jobInfo.roles" placeholder="请从下拉表格中选择">
                                <i-option v-for="item in roles" :value="item.value" :key="item">{{ item.label }}
                                </i-option>
                            </i-select>
                        </div>
                    </li>
                    <li class="position-li">
                        <span class="zymrjs">底薪</span>
                        <input type="text" v-model="jobInfo.basicSalary">
                    </li>
                    <li class="position-li">
                        <span class="zymrjs">工薪等级</span>
                        <p class="zymrjs_input">
                            <i-select v-model="jobInfo.scale" placeholder="">
                                <i-option v-for="item in scale" :value="item.value" :key="item">{{ item.label }}
                                </i-option>
                            </i-select>
                        </p>
                    </li>
                    <li class="position-li">
                        <span class="zwzc">职位职称</span>
                        <p class="zymrjs_input">
                            <i-select v-model="jobInfo.title" placeholder="">
                                <i-option v-for="item in title" :value="item.value" :key="item">{{ item.label }}
                                </i-option>
                            </i-select>
                        </p>
                    </li>
                </ul>
            </div>
        </Modal>
    </div>
</script>

<!--组件 表格内容-->
<script type="text/x-template" id="table-pannel-template" v-cloak>
    <div class="position_table" >
        <i-table :columns="columns4" :data="tableData"></i-table>
        <!-- 编辑弹框-->
        <Modal
                title="编辑职位"
                v-model="addPosition"
                :mask-closable="false"
                width="340"
                loading
                ok-text="保存"
                @on-ok="handleEditUser"
                @on-cancel="handleCancel"
                class-name="vertical-center-modal addPositionWrap vertical-center-modal-tow">
            <spin v-if="saveLoading" size="large" class="load-spin" fix>
                <icon type="load-c" size=18 class="save-staff-loading"></icon>
                <div>保存中...</div>
            </spin>
            <div class="Add-position_box">
                <ul class="position-ul">
                    <li class="position-li">
                        <span class="zymrjs">职位名称</span>
                        <input type="text" v-model="jobInfo.jobPost">
                    </li>
                    <li class="position-li">
                        <span class="zymrjs">职业默认角色</span>
                        <div class="zymrjs_input">
                            <i-select v-model="jobInfo.roles" placeholder="请从下拉表格中选择">
                                <i-option v-for="item in roles" :value="item.value" :key="item">{{ item.label }}
                                </i-option>
                            </i-select>
                        </div>
                    </li>
                    <li class="position-li">
                        <span class="zymrjs">底薪</span>
                        <input type="text" v-model="jobInfo.basicSalary">
                    </li>
                    <li class="position-li">
                        <span class="zymrjs">工薪等级</span>
                        <p class="zymrjs_input">
                            <i-select v-model="jobInfo.scale" placeholder="">
                                <i-option v-for="item in scale" :value="item.value" :key="item">{{ item.label }}
                                </i-option>
                            </i-select>
                        </p>
                    </li>
                    <li class="position-li">
                        <span class="zwzc">职位职称</span>
                        <p class="zymrjs_input">
                            <i-select v-model="jobInfo.title" placeholder="">
                                <i-option v-for="item in title" :value="item.value" :key="item">{{ item.label }}
                                </i-option>
                            </i-select>
                        </p>
                    </li>
                </ul>
            </div>
        </Modal>

        <!--删除职位弹框-->
        <Modal
                title="删除职位"
                v-model="deletePos"
                :mask-closable="false"
                width="360"
                loading
                ok-text="确认"
                @on-ok="handleSuccessDel"
                class-name="vertical-center-modal addPublicWrap addPublicWrap-tow">
            <spin v-if="delLoading" size="large" class="del-load-spin" fix>
                <icon type="load-c" size=18 class="save-staff-loading"></icon>
                <div>删除中...</div>
            </spin>
            <div class="delete-position">
                <ul class="delete-ul">
                    <h3 class="warning">确认将该职位删除吗？</h3>
                </ul>
            </div>
        </Modal>
    </div>
</script>
<script src="../../vendors/require.js"></script>
<script>
    require.config({
        paths: {
            'jquery': '../../vendors/jquery',
            'vue': '../../vendors/vue/vue',
            'iview': '../../vendors/iview/js/iview',
            'api':'../../api/api-config',
            'CryptoJS':'../../vendors/crypto-js',
            'positionAdmin':'../../data/positionAdmin'
        }
    });
    require(['positionAdmin'],function (positionAdmin) {

    })
</script>


</body>
</html>
